<template>
  <div class="count">
    <h2>我是Count组件</h2>
   <button @click="changeCount(2)">累加父组件给我的count</button>
   <button @click="add">查看组件实例</button>
   <p>子组件展示prop{{count}}</p>
  </div>
</template>

<script>
export default {
name:"Count",
data(){
    return{
 /* 如果真的是要拿到父组件数据以后,然后直接要修改,可以使用data或者计算数据进行接受,再修改,但是这样就不能影响父组件的数据了(一般来说不推荐,也很少有这种场景) */
      count1: this.count,
    }
},
//1.如果想要在组件实例上拿到父组件传递过来的props,必须先进行接收
//2. 接受props之后,就可以通过this.$props这个对象中拿到数据了
props:["count","changeCount"],
methods: {
    add(){
        console.log(this);
        console.log(this.count);
        console.log(this.$props.count);
    }
},
}
</script>

<style scoped>
.count{
    background-color: pink;
}
</style>